<template>
	<view class="container">
		<navbar :config="config"></navbar>
		<view class="topStatus u-flex-center-sa u-plr30" :style="{ top: tabTop + 'px' }"
			v-if="sureDataAll.is_able_select_self_take">
			<text class="u-474747 u-font30 " :class="status == 1 ? 'active' : ''" @click="changeStatus(1)">快递配送</text>
			<text class="u-474747 u-font30" :class="status == 2 ? 'active' : ''" @click="changeStatus(2)">上门自提</text>
		</view>

		<view class="carbox" :class="sureDataAll.is_able_select_self_take ? 'changeTabtwo' : ''">
			<view class="addressBox">
				<view class="" v-if="status == 1">
					<ldaddress :value="sureDataAll.receipt" :link="true"></ldaddress>
				</view>
				<view class="goHome" v-if="status == 2 && sureDataAll.is_able_select_self_take">
					<view class="u-flex-center u-p3040 u-border-one-one">
						<image class="u-avatar104 u-mr25" :src="sureDataAll.self_take_shop.logo" mode=""></image>
						<view class="u-flex1">
							<view class="u-474747 u-font32 ">{{ sureDataAll.self_take_shop.shop_name }}</view>
							<view class="smallAddress u-mt10">
								<text class="iconfont u-font30 u-mr10 " style="color: #474747;">&#xe611;</text>
								<text class="u-font28 u-474747">
									{{ sureDataAll.self_take_shop.province_name }}{{ sureDataAll.self_take_shop.city_name }}{{ sureDataAll.self_take_shop.area_name
									}}{{ sureDataAll.self_take_shop.address }}
								</text>
							</view>
						</view>
					</view>
					<view class="u-flex-center u-p30" style="justify-content: space-around;">
						<view class="u-mr45 u-font28 u-474747 u-flex-center">
							<text class="u-474747">提货人：</text>
							<input style="width: 150rpx;" type="text" value="" @input="userName" maxlength="8"
								placeholder="提货人姓名" placeholder-style="font-size:30rpx;" />
						</view>
						<view class="u-font28 u-474747 u-flex-center">
							<text class="u-mr10 iconfont u-474747 u-font30">&#xe64e;</text>
							<input style="width: 260rpx;" type="number" value="" maxlength="11" @input="userMobile"
								placeholder="提货人手机号" placeholder-style="font-size:30rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="" v-for="(pitem, index) in sureDataAll.shop_orders" :key="pitem.source_shop_id">
				<view class="shopList  u-mt10">
					<ldshop :shopStatus="shopStatus" :value="pitem.source_shop_name"></ldshop>
					<view v-for="item in pitem.items" :key="item.goods_id">
						<ldgoods :value="item"></ldgoods>
					</view>
				</view>

				<!-- 备注 -->
				<view class="listText u-pt30">
					<view class="u-474747 u-mb30 title">购买备注</view>
					<textarea class="textarea u-mt10 u-font28 u-474747" :auto-height="true" :maxlength="80"
						@input="textareaText($event, index)" value="" placeholder="选填，给商家留言" />
				</view>
				<!-- list -->
				<view class="listText" style="border-radius: 0 0 20rpx 20rpx;">
					<!-- u-border-one-one border -->
					<view class="u-border-one-one u-p30 u-flex-center-sb">
						<view class="u-font28 u-474747"><text>商品金额</text></view>
						<view class="u-font28 u-474747">¥ {{ pitem.original_goods_amount }}</view>
					</view>

					<view class="u-border-one-one u-p30 u-flex-center-sb">
						<view class="u-font28 u-474747"><text>运费+税费</text></view>
						<view class="u-font28 u-474747">{{ pitem.total_freight }}元</view>
					</view>
					<view class="u-border-one-one u-p30 u-flex-center-sb">
						<view class="u-font28 u-474747">
							<text v-if="marketing_type == 1">秒杀活动折扣</text>
							<text v-if="marketing_type == 2">拼团活动折扣</text>
						</view>
						<view class="u-font28 u-474747">-¥ {{ pitem.discount_amount }}</view>
					</view>
					<view class="u-border-one-one u-p30 u-flex-center-sb" v-if="pitem.first_order_activity">
						<view class="u-font28 u-474747">
							<text>首单优惠</text>
							<text
								class="u-font24 u-AAAAAA">（满{{ pitem.first_order_activity.full }}减{{ pitem.first_order_activity.reduction }}）</text>
						</view>
						<view class="u-font28 u-474747">-¥ {{ pitem.first_order_reduced }}</view>
					</view>
					<view class="u-border-one-one u-p30 u-flex-center-sb" style="padding: 0 40rpx 80rpx 34rpx;">
						<view class="u-font28 u-474747"><text>消费补贴</text></view>
						<view class="u-font30 u-AAAAAA">
							<rich-text :nodes="$mUtil.isToFixed(pitem.total_consumption_value, 2)"></rich-text>
							<!-- <text
                class="consumption_value">{{ $mUtil.priceBigSmallTherr(pitem.total_consumption_value) }}</text> 贡献值-->
						</view>
					</view>
					<!-- <view class="u-border-one-one u-p30 u-flex-center-sb">
						<view class="u-font28 u-181818"><text>支付金额</text></view>
						<view class="u-font30 u-FF0000 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)"></rich-text></view>
					</view> -->
					<view class="u-flex-center pt-pb25"
						style="justify-content: flex-end;height: 108rpx;padding-right: 28rpx;">
						<view style="color: #474747;font-size: 28rpx;">共{{ pitem.goods_num }}件商品</view>
						<view style="display: flex;align-items: center;">
							<text v-if="pitem.total_amount > 0"></text>
							<view class="u-FF721B" v-if="pitem.total_amount > 0">
								<rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)"></rich-text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listText u-mt10">
				<view v-if="platformCoupon.my_coupon_id!==0" @click="checkCoupon()"
					class="u-border-one-one u-p30 u-flex-center-sb">
					<view class="u-font28 u-474747"><text>平台优惠</text></view>
					<view v-if="platformCoupon" class="u-font30 u-999">
						<text
							style="white-space: nowrap;max-width: 450rpx;overflow: hidden;text-overflow: ellipsis;display: inline-block;vertical-align: middle;">{{platformCoupon.coupon_name}}</text>
						<text
							style="color: red;margin-left: 15rpx;display: inline-block;vertical-align: middle;">-{{platformCoupon.coupon_result_value}}</text>
					</view>
					<view v-else class="u-font30 u-AAAAAA">选择优惠券></view>
				</view>
				<!-- <view v-if="sureDataAll.has_platform" class="u-border-one-one border u-p30">
					<view class="u-flex-center-sb">
						<view class="u-font28 u-181818"><text>公益积分抵扣</text></view>
						<view class="u-font30 u-999">
							<u-switch v-model="usePlatformPoint" @change="changePlatformPoint()" active-color='#2DB62B'></u-switch>
						</view>
					</view>
					<view style="color: #808080;font-size: 24rpx;">共计{{sureDataAll.integral_able}}<text v-if="usePlatformPoint">，可使用{{sureDataAll.total_point}}抵扣{{sureDataAll.total_point}}元</text></view>
				</view> -->
			</view>
		</view>

		<!-- 底部 -->

		<view class="botfixed u-flex-center-sb">
			<view class="leftAll u-flex-center">
				<view class="u-flex-center">
					<text class="u-mr25 u-font30 u-474747">共{{ totaltNum }}件</text>
					<text class="u-font30 u-474747 ">合计：</text>
					<view class="u-FF721B">
						<rich-text :nodes="$mUtil.priceBigSmall(sureDataAll.total_money)"></rich-text>
					</view>
				</view>
			</view>
			<view class="rightP u-flex-center" @click="submitBtn">
				<view class="u-btn btnWidth u-ml30 u-font36">{{submitText}}</view>
			</view>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
		<!-- 身份验证弹框 -->
		<u-popup v-model="showPopup" @close="closePopup" :round="10" mode="bottom" :closeOnClickOverlay="false">
			<view style="padding: 40rpx;">
				<u-form class="form-box" :model="form" ref="uForm" label-width="156">
					<u-form-item class="usable-input" label="真实姓名">
						<u-input v-model="form.name" placeholder="请输入真实姓名" />
					</u-form-item>
					<u-form-item class="usable-input" label="身份证号">
						<u-input v-model="form.id_card" placeholder="请输入身份证号" :clearable="false" />
					</u-form-item>
				</u-form>
				<view class="rightP u-flex-center u-mt40" @click="submitOrder">
					<view class="u-btn u-ml30 u-font36" style="width: 90%;margin: 0 auto;">提交订单</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var app = getApp();
	import ldaddress from '../../../components/ld-address/ld-address.vue';
	import ldshop from '../../../components/ld-shop/ld-shop.vue';
	import ldgoods from '../../../components/ld-goods/ld-goods.vue';
	export default {
		components: {
			ldaddress,
			ldshop,
			ldgoods
		},
		data() {
			return {
				shopStatus: false,
				totaltNum: 0,
				tabTop: 0,
				price: 20,
				loading: false,
				status: 1, //快递方式标志
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '确认订单',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#FF721B'],
					statusBarFontColor: '#fff'
				},
				sureDataAll: {},
				shopDiscounts: {},
				self_take: {},
				dataJson: {},
				addressChose: false,
				type: null,
				marketing_type: null,
				imgUrl: this.$mConfig.staticUrl,
				usePlatformPoint: true, //是否使用公益积分抵扣
				// 当前使用的平台优惠券
				platformCoupon: {
					my_coupon_id: 0
				},
				showPopup: false,
				form: {
					name: '',
					id_card: ''
				},
				third: false,
				trade_type_id: null,
				submitText: '提交订单'
			};
		},

		onLoad(options) {
			this.loading = true;
			this.third = options.third;
			this.trade_type_id = options.trade_type_id;
			this.tabTop = app.globalData.barHeight + 44;
			let dataJson = uni.getStorageSync('dataJson');
			if (options.type) {
				this.type = options.type;
			}
			if (this.third && (this.trade_type_id == 1 || this.trade_type_id == 4 || this.trade_type_id == 5)) {
				this.submitText = '提交'
			} else {
				this.submitText = '提交订单'
			}
			// let sureData = uni.getStorageSync('sureData')
			// this.getByShop(sureDataAll.)

			if (dataJson) {
				this.dataJson = dataJson;
			}
		},

		onShow() {
			let orderreminder = uni.getStorageSync('orderreminder');
			if (orderreminder) {
				this.$mUtil.toast('已生成待付款订单');
				uni.removeStorageSync('orderreminder');
			}

			let dataJson = uni.getStorageSync('dataJson');
			console.log("uni.getStorageSync('dataJson')",uni.getStorageSync('dataJson'))
			if (dataJson && !this.addressChose) {
				this.loading = true;
				this.$http.post(`/order/build`, {
					...dataJson,
					use_platform_point: this.usePlatformPoint,
					platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
						my_coupon_id: this.platformCoupon.my_coupon_id
					}
				}).then(res => {
					if (res && res.code == 200) {
						this.loading = false;

						uni.setStorageSync('sureData', res.data);
						if (res.data) {
							this.marketing_type = res.data.marketing_type;
							this.sureDataAll = res.data;
							let totaltNum = 0;
							res.data.shop_orders.forEach(res => {
								totaltNum += res.goods_num;
								
							});
							this.sureData = res.data;
							this.totaltNum = totaltNum;
						}
						if (!res.data.has_platform) {
							this.usePlatformPoint = false;
						}
						//默认使用的平台优惠券
						if (res.data.platform_coupon.my_coupon_id != 0) {
							this.platformCoupon = res.data.platform_coupon;
						}
					}
				});
			}
		},
		methods: {
			changePlatformPoint() {
				let dataJson = uni.getStorageSync('dataJson');
				if (dataJson) {
					this.postData(dataJson);
				}
			},
			// 身份验证弹框
			submitOrder() {
				if (!this.form.name) {
					this.$mUtil.toast('请填写真实姓名')
					return false
				}
				if (!
					/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
					.test(this.form.id_card)) {
					this.$mUtil.toast('请填写身份证号')
					return false
				}
				this.dataJson.realName = this.form.name;
				this.dataJson.idNo = this.form.id_card;
				this.orderCreated();
			},
			closePopup() {
				this.showPopup = false;
			},
			//提交订单
			submitBtn() {
				if (this.status == 1) {
					//快速配送
					this.dataJson.self_take = null;

					if (this.dataJson.receipt_id == null && !this.sureDataAll.receipt.id) {
						this.$mUtil.toast('请填写收货地址');
						return false;
					}
					if (this.third && (this.trade_type_id == 1 || this.trade_type_id == 4 || this.trade_type_id == 5)) {
						this.showPopup = true;
					} else {
						this.orderCreated();
					}
				} else {
					//自提
					if (!this.self_take.receiver) {
						this.$mUtil.toast('请填写提货人姓名');
						return false;
					}
					if (!this.self_take.mobile) {
						this.$mUtil.toast('请填写提货人手机号');
						return false;
					}
					if (!this.self_take.mobile.match(this.$mConfig.telRegex)) {
						this.$mUtil.toast('请输入正确手机号');
						return false;
					}
					this.dataJson.self_take = this.self_take;
					if (this.third && (this.trade_type_id == 1 || this.trade_type_id == 4 || this.trade_type_id == 5)) {
						this.showPopup = true;
					} else {
						this.orderCreated();
					}
				}
				// this.orderCreated()
			},
			orderCreated() {
				this.$http.post('/order/create', {
					...this.dataJson,
					use_platform_point: this.usePlatformPoint,
					platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
						my_coupon_id: this.platformCoupon.my_coupon_id
					}
				}).then(res => {
					this.loading = false;
					if (res && res.code == 200) {
						let target = res.data;
						if (target.payment_status == 5) {
							uni.reLaunch({
								url: `/pages/order/orderList/orderList?orderType=${this.sureDataAll.area_feature==3?3:0}`
							});
							return false;
						} else {
							uni.navigateTo({
								url: '../../order/pay?id=' + target.id + '&total_amount=' + target
									.total_amount +
									'&expired_pay_time=' + target.expired_pay_time + '&type=' + this.type
							});
						}
					}
				});
			},
			userName(e) {
				if (this.status == 2) {
					this.self_take.receiver = e.detail.value;
				}
			},
			userMobile(e) {
				if (this.status == 2) {
					this.self_take.mobile = e.detail.value;
				}
			},
			textareaText(e, index) {
				this.dataJson.shop_orders.map((v, i) => {
					if (i == index) {
						v.user_remark = e.detail.value;
					}
				});
			},
			//店铺优惠查询
			getByShop(id) {
				this.$http.get('/marketing/firstOrder/getByShop/' + id).then(res => {
					if (res && res.code == 200) {
						this.shopDiscounts = res.data;
					}
				});
			},
			//选完地址回选
			otherFun(object) {
				this.addressChose = true;
				if (!!object) {
					let dataJson = uni.getStorageSync('dataJson');
					dataJson.receipt_id = object.addressid;
					this.dataJson = dataJson;
					this.postData(dataJson);
				}
			},
			postData(dataJson) {
				this.$http.post(`/order/build`, {
					...dataJson,
					use_platform_point: this.usePlatformPoint,
					platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
						my_coupon_id: this.platformCoupon.my_coupon_id
					}
				}).then(res => {
					if (res && res.code == 200) {
						uni.setStorageSync('sureData', res.data);
						this.sureDataAll = res.data;
						let totaltNum = 0;
						res.data.shop_orders.forEach(res => {
							totaltNum += res.goods_num;
						});
						this.totaltNum = totaltNum;
						if (!res.data.has_platform) {
							this.usePlatformPoint = false;
						}
					}
				});
			},
			changeStatus(val) {
				this.status = val;
				if (val == 1) {
					this.dataJson.shipment_mode = 0;
				} else {
					this.dataJson.shipment_mode = 1;
				}
				this.postData(this.dataJson);
			},
			//选择优惠券
			checkCoupon() {
				let params = {
					marketing_type: this.sureDataAll.marketing_type,
					total_amount_dec_shop_coupon: this.sureDataAll.total_amount_dec_shop_coupon, // 支付总金额
					shop_order_list: this.sureDataAll.shop_orders.map(item => {
						return {
							total_amount_dec_shop_coupon: item
								.total_amount_dec_shop_coupon, //不含运费，扣出首单，扣除店铺优惠券的费用
							shop_id: item.shop_id // 店铺id
							
							
						}
					})
				}
				uni.navigateTo({
					url: `/pages/couponCenter/index?isCheck=true&couponId=${this.platformCoupon.my_coupon_id}&checkParams=${JSON.stringify(params)}`
				})
			},
			// 优惠券发生变动
			changeCoupon(platformCoupon) {
				this.platformCoupon = platformCoupon;
			}
		}
	};
</script>

<style lang="scss" scoped>
	// page {
	//   background-color: #F6F6F6;
	// }

	.container {
		background: linear-gradient(to bottom, #FF721B 0%, #F6F6F6 40%);
		border-radius: 40rpx;

		/deep/ .courierAddress {
			background-color: #fff;
			padding: 36rpx 30rpx;
			border-radius: 40rpx;
		}
	}

	/deep/ .input-placeholder {
		font-size: 26rpx;
	}

	.hx-navbar {
		/deep/ .hx-navbar__content {
			// background-color: #3775F6 ;
			background: linear-gradient(to bottom, #FF721B 20%, rgb(254, 136, 63)) !important;

			.hx_text_overflow {
				color: #fff !important;
			}
		}
	}

	.address {
		margin-right: 10rpx;
		width: 25rpx;
		height: 25rpx;
	}

	.phone {
		margin-right: 10rpx;
		width: 25rpx;
		height: 25rpx;
	}

	.border {
		border-bottom: 3rpx solid #e7e7e7;
	}

	.textarea {
		width: 100%;
		height: 80rpx;
		background-color: #fafafa;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		border: 1px solid #ededed;
		border-radius: 20rpx;
	}

	.topStatus {
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		z-index: 9;

		width: 100%;
		box-sizing: border-box;

		text {
			line-height: 100rpx;
			position: relative;
		}

		.active {
			font-weight: bold;
			color: #FF721B;
		}

		.active:after {
			width: 100%;
			height: 2px;
			background-color: #FF721B;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.courierAddress {
		background-color: #fff;
		padding: 36rpx 30rpx;
	}

	.goHome,
	.listText {
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				color: #474747;
				font-size: 26rpx;
			}
		}
		
		.u-border-one-one {
		  padding: 0 42rpx 30rpx 42rpx;
		}

	}

	.consumption_value-icon {
		color: #FF721B;
		font-size: 40rpx;
	}

	.consumption_value {
		color: #FF721B;
	}

	.btnview {
		width: 300rpx;
		margin: 30rpx auto 0;
	}

	.carbox {
		padding: 20rpx 30rpx 160rpx 30rpx;

		.addressBox {
			margin-bottom: 30rpx;
		}

		.shopList {
			background-color: #fff;
			padding: 30rpx 30rpx 0;
			border-radius: 40rpx 40rpx 0 0;
		}
	}

	.changeTabtwo {
		padding: 130rpx 0 160rpx 0;
	}

	.rightText {
		justify-content: space-between;
		height: 200rpx;
	}

	.bottext,
	.botPrice {
		width: 100%;
	}

	.bottext {
		margin-top: 36rpx;
	}

	.rightAddRes {
		width: 172rpx;
		height: 50rpx;
		border-radius: 8rpx;
		border: 1px solid #e5e5e5;

		.centertext {
			text-align: center;
		}

		.btnTag {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #dedede;
			font-size: 46rpx;
			color: #888;
		}
	}

	.btnWidth {
		width: 200rpx;
		background: #FF721B;
	}

	.botfixed {
		position: fixed;
		background-color: #fff;
		width: 100%;
		height: 138rpx;
		bottom: 0;
		left: 0;
		z-index: 9;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>